<template>
  <div>
    <div class="w-screen px-2 mt-1">
      <div class="w-full flex items-center justify-between h-3">
        <div
          class="h-full text-base leading-3 cursor-pointer"
          @click="cityClick"
        >
          {{ currentCity.cityName }}
        </div>
        <div
          class="flex items-center justify-center h-full bg-white px-1 rounded"
          @click="positionClick"
        >
          <div class="mr-2 text-sm">我的位置</div>
          <van-icon name="aim" color="#ff9854" size="0.5rem" />
        </div>
      </div>
      <div
        class="w-full h-5 flex items-center justify-between mt-1 cursor-pointer"
        @click="isShowCalendar = true"
      >
        <div class="h-5">
          <div class="h-2 text-gray-400 text-sm">入住</div>
          <div class="h-3 text-black text-base">{{ startMonth }}</div>
        </div>
        <div class="w-auto h-2 text-base">共{{ stayDay }}晚</div>
        <div class="h-5">
          <div class="h-2 text-gray-400 text-sm">离店</div>
          <div class="h-3 text-black text-base">{{ endMonth }}</div>
        </div>
      </div>
      <div class="w-full pr-3">
        <template v-for="(item, index) in hostSuggest" :key="index">
          <span class="inline-block pr-1.5 text-sm text-gray-600">{{
            item?.tagText?.text
          }}</span>
        </template>
      </div>
      <div
        class="w-full h-4 leading-4 flex items-center justify-center text-base text-white bg-orange-300 rounded-sm mt-1 tracking-wider cursor-pointer"
        @click="searchBtnClick"
      >
        开始搜索
      </div>
    </div>
    <van-calendar
      v-model:show="isShowCalendar"
      type="range"
      color="#ff9854"
      @confirm="onConfirm"
      teleport="body"
      class="home-search"
      :round="false"
    />
  </div>
</template>
<script setup>
import { message } from '@/libs/index'
import { useRouter } from 'vue-router'
import { useRouterStore } from '@/stores/modules/router.js'
import useCityStore from '@/stores/modules/city'
import { storeToRefs } from 'pinia'
import { dayDiff, formatMonthDay } from '../../../utils/dayjs'
import { ref } from 'vue'
const store = useRouterStore()
const router = useRouter()

const positionClick = () => {
  navigator.geolocation.getCurrentPosition(
    (res) => {
      console.log(res)
      message('success', '获取定位成功', 3000)
    },
    (err) => {
      console.log(err)
      message('warn', '获取定位失败', 3000)
    },
    {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    }
  )
}

const cityStore = useCityStore()
const { currentCity } = storeToRefs(cityStore)

//选择日期
const day = new Date()
const startMonth = ref(formatMonthDay(day))
const endDay = new Date().setDate(day.getDate() + 1)
const endMonth = ref(formatMonthDay(endDay))
const stayDay = ref(dayDiff(day, endDay))
const isShowCalendar = ref(false)
const onConfirm = (value) => {
  const startValue = value[0]
  const endValue = value[1]
  startMonth.value = formatMonthDay(startValue)
  endMonth.value = formatMonthDay(endValue)
  stayDay.value = dayDiff(startValue, endValue)
  isShowCalendar.value = false
}
const cityClick = () => {
  store.setRouterType('push')
  router.push('/city')
}
//props
const props = defineProps({
  hostSuggest: {
    type: Array,
    default: () => [],
    require: true
  },
  hostCategory: {
    type: Array,
    default: () => [],
    require: true
  }
})
//开始搜索
const searchBtnClick = () => {
  store.setRouterType('push')
  console.log(JSON.stringify(currentCity.value))
  router.push({
    path: '/search',
    query: {
      startDate: startMonth.value,
      endDate: endMonth.value,
      currentCity: JSON.stringify(currentCity.value)
    }
  })
}
</script>
<style lang="scss" scoped></style>
